// 自定义指令插件
import { useIntersectionObserver } from '@vueuse/core'
// 图片懒加载优化 导入默认图片
import defaultImg from '@/assets/images/200.png'
const directivePlugin = {
  install(app) {
    // 图片懒加载
    app.directive('lazy-img', {
      mounted(el, binding) {
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          if (isIntersecting) { 
            // 懒加载优化 容错处理(错误优先)
            el.onerror = function(){
              el.src = defaultImg // 赋值默认图片路径
            }
            // 如果isIntersecting为真 说明目标元素出现 给图片赋值路径
            el.src = binding.value
            stop() // 关闭检测目标元素的可见性
          }else{
            el.src = defaultImg
          }
        })
      }
    })
  }
}

export default directivePlugin
